<template>
    <div class="film" v-if="obj">
        <my-head :title="obj.name"></my-head>
        <div class="film-top">
            <img v-lazy="obj.poster" class="poster" alt="">
        </div>
        <div>
            <div class="head-top">
                <div class="topleft">
                    剧照
                </div>
                <div class="topright" @click="show=true">
                    全部({{obj.photos.length}}) 
                    <van-icon name="arrow" size="16" color="#191a1b" /> 
                </div>
            </div>
            <div class="ul">
                <div class="wrapper ">
                    <div class="item" v-for="(l,i) in obj.photos" :key="i" >
                        <img v-lazy="l" class="itemimg" alt="" @click="preview(i)">
                    </div>
                </div>
            </div>
        </div>

        <div class="goSchedule" @click="goSchedule">
            选座购票
        </div>
        <van-popup v-model="show" closeable position="bottom" :style="{ height: '100%' }"  duration="0.1">
            <div class="popbox">
                <h2>全部剧照 ({{obj.photos.length}}) </h2>
                <div class="imglist">
                    <img v-lazy="l" v-for="(l,i) in obj.photos" :key="i" class="pimg" alt="" >
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import {ImagePreview } from 'vant'
export default {
    data(){
        return {
            obj:null,
            show:false
        }
    },
    methods:{
        // 选座购票 
        goSchedule(){
            this.$router.push({name:'film-cinemas',params:{filmId:this.obj.filmId}})
        },
        // 图片预览
        preview(index){
            ImagePreview({
                images: this.obj.photos,
                startPosition: index,
            });
        },
        async getFilmData(){
            let res = await this.$ajax.getMaizuo({
                filmId:this.$route.params.filmId,
            },{
                'X-Host': 'mall.film-ticket.film.info'
            })
            this.obj = res.data.film
        }
    },
    mounted(){
        this.getFilmData()
    }
}
</script>

<style lang="scss" scoped>
.film{
    width:100%;
    height:100%;
    background: #f4f4f4;
    padding-bottom:49px;
    .film-top{
        width:100%;
        height:210px;
        overflow: hidden;
        position: relative;
        .poster{
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .head-top{
        display: flex;
        justify-content: space-between;
        padding:15px;
        width:100%;
        font-size: 16px;
        text-align: left;
        color: #191a1b;
    }
    .ul{
        width:100%;
        overflow: hidden;
        .wrapper{
            overflow: auto;
            display: flex;
            padding:0 15px;
            .item{
                width:150px;
                height: 100px;
                margin:10px;
                position: relative;
                .itemimg{
                    width:150px;
                    height: 100px;
                }
            }
        }
    }

    .goSchedule{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 49px;
        width: 100%;
        text-align: center;
        background-color: #ff5f16;
        color: #fff;
        font-size: 16px;
        line-height: 49px;
    }
}

.popbox{
    padding-top:40px;
    .imglist{
        display: flex;
        flex-wrap: wrap;
        width:100%;
        justify-content: flex-start;
        .pimg{
            width:121px;
            height:121px;
            margin:2px;
        }
    }
}
</style>